<template>
  <div class="exam-view">
    <el-card>
      <template #header>
        <div class="exam-header">
          <div class="exam-info">
            <h2>{{ examInfo.name }}</h2>
            <div class="exam-meta">
              <span>总分：{{ examInfo.totalScore }}分</span>
              <span>时长：{{ examInfo.duration }}分钟</span>
              <span>剩余时间：{{ formatTime(remainingTime) }}</span>
            </div>
          </div>
          <el-button type="primary" @click="submitExam">交卷</el-button>
        </div>
      </template>

      <div class="question-list">
        <div v-for="(question, index) in questions" :key="index" class="question-item">
          <div class="question-header">
            <span class="question-type">{{ question.type }}</span>
            <span class="question-score">{{ question.score }}分</span>
          </div>
          
          <div class="question-content">
            <div class="question-title">{{ index + 1 }}. {{ question.title }}</div>
            
            <!-- 选择题 -->
            <template v-if="question.type === '选择题'">
              <el-radio-group v-model="answers[index]">
                <el-radio 
                  v-for="(option, key) in question.options" 
                  :key="key" 
                  :label="key"
                >
                  {{ option }}
                </el-radio>
              </el-radio-group>
            </template>

            <!-- 填空题 -->
            <template v-else-if="question.type === '填空题'">
              <el-input 
                v-model="answers[index]"
                type="text"
                placeholder="请输入答案"
              />
            </template>

            <!-- 编程题 -->
            <template v-else-if="question.type === '编程题'">
              <el-input
                v-model="answers[index]"
                type="textarea"
                :rows="10"
                placeholder="请输入代码"
              />
            </template>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()

// 考试信息
const examInfo = ref({
  name: 'C语言期中考试',
  totalScore: 100,
  duration: 120,
  startTime: new Date()
})

// 剩余时间（秒）
const remainingTime = ref(examInfo.value.duration * 60)

// 题目列表
const questions = ref([
  {
    type: '选择题',
    title: '以下哪个不是C语言的基本数据类型？',
    options: {
      A: 'int',
      B: 'float',
      C: 'string',
      D: 'char'
    },
    score: 5
  },
  {
    type: '填空题',
    title: 'C语言中，声明一个整型变量的关键字是____。',
    score: 5
  },
  {
    type: '编程题',
    title: '请编写一个函数，实现冒泡排序算法。',
    score: 20
  }
])

// 答案
const answers = ref([])

// 格式化时间
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 倒计时
let timer
const startTimer = () => {
  timer = setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value--
    } else {
      clearInterval(timer)
      submitExam(true)
    }
  }, 1000)
}

// 提交考试
const submitExam = async (isTimeout = false) => {
  if (!isTimeout) {
    try {
      await ElMessageBox.confirm(
        '确定要提交试卷吗？提交后将无法修改',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
    } catch {
      return
    }
  }

  // 这里添加提交试卷的API调用
  ElMessage.success(isTimeout ? '考试时间已到，系统自动提交' : '提交成功')
  router.push('/student/results')
}

onMounted(() => {
  startTimer()
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped>
.exam-view {
  padding: 20px;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exam-meta {
  margin-top: 10px;
  color: #666;
}

.exam-meta span {
  margin-right: 20px;
}

.question-list {
  margin-top: 20px;
}

.question-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.question-type {
  color: #409EFF;
}

.question-score {
  color: #F56C6C;
}

.question-title {
  margin-bottom: 15px;
  font-weight: bold;
}

.el-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style> 